<template>
  <div class="changepwd">
    <van-nav-bar
      title="修改密码"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="img">
      <van-image
        round
        width="8rem"
        height="8rem"
        src="http://img.wxcha.com/m00/f0/f5/5e3999ad5a8d62188ac5ba8ca32e058f.jpg"
      />
    </div>

    <van-form @submit="onSubmit">
      <van-field
        v-model="oldpassword"
        name="旧密码"
        label="旧密码"
        placeholder="请输入旧密码"
        :rules="[{ required: true, message: '请填写旧密码' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="新密码"
        label="新密码"
        placeholder="请输入新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      oldpassword: "",
      password: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      console.log("submit", values);
    },
  },
};
</script>

<style scoped>
.van-field {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.img {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-button--block{
  margin-top: 4rem;
}
</style>
